<template>
  <!-- 完成新增 & 编辑功能 -->
  <!--
      el-dialog：弹出框 
        title：设置标题
        visible：用来控制面板的显示与隐藏
          .sync：暂时不解锁此技术
    -->
  <el-dialog :title="mytitle" :visible="dailogShow">
    <el-form ref="myform" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" placeholder="1-50个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" placeholder="1-50个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager">
          <el-option
            v-for="(item, index) in list"
            :key="index"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" placeholder="1-300个字符"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button @click="submit" type="primary">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getDeptApi,
  addDeptApi,
  getDeptDetailApi,
  updateDeptApi
} from '@/api/departments'
import { getSimpleListApi } from '@/api/employees'
export default {
  // dailogShow：控制面板的显示与隐藏
  // id：当前点击添加子部门的元素的 id
  props: ['dailogShow', 'id'],
  data () {
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      // 校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' }, // 必填
          { min: 1, max: 50, message: '长度 1-50 个字符', trigger: 'blur' }, // 1-50个字符
          {
            // 添加自定义校验规则
            validator: async (rule, value, callback) => {
              // 同级部门中禁止出现重复的部门
              // 得到所有的部门数据
              const res = await getDeptApi()
              // 判断当前操作是新增还是编辑
              if (!this.form.id) {
                // 新增操作
                res.data.depts.some(
                  item => item.pid === this.id && item.name === value
                )
                  ? callback(new Error('部门名称不能相同'))
                  : callback()
              } else {
                // 编辑操作
                res.data.depts.some(
                  item =>
                    item.pid === this.form.pid &&
                    item.id !== this.form.id &&
                    item.name === value
                )
                  ? callback(new Error('部门名称不能冲突'))
                  : callback()
                // // 找到所有的同级元素(除掉自己：保存 id 不相同)
                // const arr1 = res.data.depts.filter(item => {
                //   return item.pid === this.form.pid && item.id !== this.form.id
                // })
                // // 判断是否有名称相同的元素
                // const bool = arr1.some(item => {
                //   return item.name === value
                // })
                // bool ? callback(new Error('部门名称不能冲突')) : callback()
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' }, // 必填
          { min: 1, max: 50, message: '长度 1-50 个字符', trigger: 'blur' }, // 1-50个字符
          {
            // 添加自定义校验规则
            validator: async (rule, value, callback) => {
              // 得到所有的部门数据
              const res = await getDeptApi()
              if (!this.form.id) {
                // 新增操作
                // 部门编码在整个模块中都不允许重复
                // 遍历数据，判断是否存在相同的 code
                res.data.depts.some(item => {
                  return item.code === value
                })
                  ? callback(new Error('部门编码不能重复'))
                  : callback()
              } else {
                // 编辑操作
                res.data.depts.some(item => {
                  return item.code === value && item.id !== this.form.id
                })
                  ? callback(new Error('部门编码不能重复'))
                  : callback()
              }
            },
            trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' } // 必填
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' }, // 必填
          { min: 1, max: 300, message: '长度 1-300 个字符', trigger: 'blur' } // 1-300个字符
        ]
      },
      // 负责人的列表
      list: []
    }
  },
  computed: {
    mytitle: function () {
      // 判断 form 中是否存在 id
      return this.form.id ? '编辑部门' : '新增部门'
    }
  },
  methods: {
    // 得到当前操作的部门的详情
    async getDeptDetail (id) {
      // 得到当前操作的部门的详情
      const res = await getDeptDetailApi(id)
      // 保存需要编辑的数据
      this.form = res.data
    },
    // 关闭面板
    cancle () {
      this.$emit('update:dailogShow', false)
      // 重置校验
      this.$refs.myform.resetFields()
      // 重置数据
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      }
    },
    // 点击确定时触发的事件
    submit () {
      // 全局验证
      this.$refs.myform.validate(async res => {
        if (res) {
          // 验证通过
          // 判断是新增还是编辑
          if (!this.form.id) {
            // 得到新增的数据，发送请求到服务器
            await addDeptApi({
              ...this.form,
              pid: this.id
            })
          } else {
            // 编辑操作
            await updateDeptApi(this.form)
          }
          // 关闭新增面板，
          this.$emit('update:dailogShow', false)
          // 提示新增成功，
          this.$message({
            type: 'success',
            message: this.form.id ? '编辑成功' :'新增成功'
          })
          // 更新页面数据，
          this.$emit('updateData')
          // 清空表单中的数据
          this.form = {
            name: '', // 部门名称
            code: '', // 部门编码
            manager: '', // 部门负责人
            introduce: '' // 部门介绍
          }
        } else {
          // 验证失败
          console.log('失败')
        }
      })
    }
  },
  async created () {
    // 得到所有的负责人列表
    const res = await getSimpleListApi()
    this.list = res.data
  }
}
</script>

<style></style>
